<template>
    <div class="login_wrap">
        <bgCanvas class="canVas"></bgCanvas>
        <div class="login_box">
            <img src="@/assets/logo.png" alt="">
            <h1>进思后台管理系统</h1>
            <div class="login_form">
                <!-- 使用element-ui中的form  主要是他有自动校验功能 -->
                <!-- el-form 
                    :rules具有验证功能,设置验证对象   与el-form-item上的prop配合使用
                    :model 收集数据    与 el-input中的v-model配合使用
                -->
                <el-form :rules="ruleObj" :model="formObj" ref="myForm">
                    <!-- 输入用户名 -->
                    <el-form-item prop="userName">
                        <el-input v-model="formObj.userName">
                            <!-- 通过添加插槽的方式添加icon -->
                            <template slot="prepend">
                                <i class="el-icon-user"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <!-- 输入密码 -->
                    <el-form-item prop="password">
                        <el-input v-model="formObj.password">
                            <!-- 通过添加插槽的方式添加icon -->
                            <template slot="prepend">
                                <i class="el-icon-lock"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <!-- 输入验证码 -->
                    <el-form-item prop="veri"> 
                        <!-- 这里使用div将element-ui组件包裹起来,是因为ui组件不能使用flex布局 -->
                        <div class="veri_wrap">
                            <el-input v-model="formObj.veri">
                                <template slot="prepend">
                                    <i class="el-icon-help"></i>
                                </template>
                            </el-input>
                            <!-- 验证码组件 -->
                            <Veri class="bgColor"></Veri>
                        </div>
                    </el-form-item>
                    <div class="login_form_btn">
                        <el-button type="primary">忘记密码</el-button>
                        <el-button type="success" @click="subMit">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
//引入背景画布
import bgCanvas from '@/components/bgCanvas';
//引入element-ui组件
import { Form,FormItem,Input,Button } from 'element-ui';
//引入验证码画布
import Veri from '@/components/Login/Veri'
//引入接口
import {CheckVeri,_Login} from '@/api/common.js'

export default {
    data() {
        return {
            //表单验证规则
            ruleObj:{
                //用户名的验证规则,一条规则一个对象
                userName:[
                    {
                        required:true,//设置必填
                        message:'必须输入用户名',//没填写用户名时,会触发
                        trigger:'blur'//触发方式
                    },
                    {
                        min:3,
                        max:10,
                        message:'长度在3到10个字符',
                        trigger:'blur'
                    }
                ],
                //密码框的验证规则
                password:[
                    {
                        pattern:/^\d{3,10}$/,
                        message:'密码不符合规则',
                        trigger:'blur'
                    },
                    {
                        required:true,
                        message:'必填密码',
                        trigger:'blur'
                    }
                ],
                //验证码验证规则
                veri:{
                    required:true,
                    message:'验证码必填',
                    trigger:'blur'
                }
            },
            //收集数据
            formObj:{
                userName:'',
                password:'',
                veri:''
            }
        }
    },
    components: {
        bgCanvas,
        "el-form":Form,
        "el-form-item":FormItem,
        "el-button": Button,
        "el-input": Input,
        Veri
    },
    methods:{
        subMit(){
            //获取表单组件,进行表单验证结果的判断
            this.$refs.myForm.validate(async vali => {
                console.log(vali)//vali 为true,表单选项都验证通过,有一个不符合,就返回false
                //验证通过之后才发送请求
                if(vali){
                    var veriRes = await CheckVeri(this.formObj.veri)//校验验证码的接口
                    console.log(veriRes)
                    //如果失败
                    if(veriRes.data.err){
                        this.$message.error(veriRes.data.err)
                    }
                    //如果成功
                    if(veriRes.data.success){
                        //调用登录接口
                        var loginRes = await _Login(this.formObj)
                        console.log(loginRes)
                        //如果成功
                        if(loginRes.data.success){
                            this.$message.success(loginRes.data.success);
                            //且 跳转页面
                            this.$router.push('/layout/homeEcharts')
                        }else{
                            this.$message.error(loginRes.data.err)
                        }
                    }
                }
            }) 
        }
    }
}
</script>

<style lang="less" scoped>
.login_wrap{
    width: 100vw;
    height: 100vh;
    background-color: rgb(12, 24, 84);
    position: relative;
    .canVas{
        width: 100%;
        height: 100%;
    }
    .login_box{
        width: 50%;
        height: 450px;
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        text-align: center;
        img{
            width: 100px;
            height: 100px;
            border:1px solid white;
            border-radius:20px;
        }
        h1{
            color:white;
        }
        .login_form{
            width: 500px;
            margin:20px auto;
            .veri_wrap{
                display: flex;
                height: 40px;
                .bgColor{
                    background-color: #D4EDB9;
                }
            }
            /deep/ .el-input__inner,.el-form-item__content{
                background-color: transparent;
            }
        }
        .login_form_btn{
            width: 550px;
            display: flex;
            justify-content: space-between;
            margin-left: -25px;
        }
    }
}
</style>